<template>
  <el-table-column
    :prop="data[propName]"
    :label="data[labelName]"
    :width="columnWidth(data)"
    :align="data[alignName]"
    :fixed="data[fixedName]"
    :show-overflow-tooltip="(tableSet && tableSet.tooltip.includes(data.prop)) || !data[widthName]"
    :min-width="200"
  >
    <template #header="scope">
      <div class="columnHeader">
        <b>{{data.label}}</b>
        <template v-if="tableSet  && tableSet.filters && tableSet.filters.length>0">
          <template v-for="filters in tableSet.filters">
            <popover-box
                placement="bottom-end"
                :width="220"
                v-if="filters.prop===data.prop"
            >
              <template #btn>
                <i class="el-icon-arrow-down opacity60"></i>
              </template>
              <template #default>
                <div class="filterBox">
                  <div class="filterBox-main">
                    <el-scrollbar>
                      <el-checkbox-group
                          v-model="filters.value"
                         class="checkboxBack"
                      >
                        <el-checkbox
                            v-for="item in filters.filter"
                            :label="item.value"
                        >
                          {{item.label}}
                        </el-checkbox>
                      </el-checkbox-group>
                    </el-scrollbar>
                  </div>
                  <div class="filterBox-foot">
                    <div>
                      <el-link :underline="false" @click="handleCheckAllChange(filters)">全选</el-link>
                      <el-divider direction="vertical"></el-divider>
                      <el-link :underline="false" @click="handleInvertChange(filters)">反选</el-link>
                    </div>
                    <div>
                      <el-link :underline="false" @click="clearFilter(filters)">重置</el-link>
                      <el-button
                          type="primary"
                          size="mini"
                          @click="handlerFilter(filters)"
                          class="ml8"
                      >
                        <p>筛选</p>
                      </el-button>
                    </div>
                  </div>
                </div>
              </template>
            </popover-box>
          </template>
        </template>
      </div>
    </template>
    <template #default="scope">
      <template v-if="$scopedSlots[data.prop]">
        <slot :name="data.prop" :scope="scope"/>
      </template>
      <template v-else>
       <row-cell-item
         :data="data"
         :tableSet="tableSet"
         :parentData="parentData"
         :scope="scope"
         @changeBtn="changeBtn"
       />
      </template>
    </template>
  </el-table-column>
</template>

<script>
  import FormBox from "@/comModule/FormBox";
  import IsData from "@/comModule/IsData";
  import RowCellItem from "@/comModule/TableBox/RowCellItem";
  import PopoverBox from "@/comModule/PopoverBox";
  export default {
    name: 'RowCell',
    //获取父级数据
    props: {
      data:{
        type:Object,
      },
      parentData:{
        type:Array,
      },
      tableSet:{
        type:Object,
      },
      propName:{
        type:String,
        default: () => {
          return 'prop';
        },
      },
      labelName:{
        type:String,
        default: () => {
          return 'label';
        },
      },
      widthName:{
        type:String,
        default: () => {
          return 'width';
        },
      },
      alignName:{
        type:String,
        default: () => {
          return 'align';
        },
      },
      fixedName:{
        type:String,
        default: () => {
          return 'fixed';
        },
      },
    },
    components: {
      PopoverBox,
      RowCellItem,
      IsData,
      FormBox

    },
    data() {
      return {

      }
    },
    mounted() {

    },
    computed: {

    },
    methods: {
      //设置宽度
      columnWidth(row){
        let width=row[this.widthName]
        let tableSet=this.tableSet
        //判断是否有筛选，有则增大宽度
        //判断是否有筛选，有则增大宽度
        if (tableSet  && tableSet.filters && tableSet.filters.length>0){
          tableSet.filters.forEach(item=>{
            if (item.prop===row.prop){
              width+=22
            }
          })
        }
        return width
      },
      //重置
      clearFilter(row){
        row.value=[]
      },
      //全选
      handleCheckAllChange(row){
        row.value=[]
        row.filter.forEach(item=>{
          row.value.push(item.value)
        })
      },
      //反选
      handleInvertChange(row){
        let newArr=[]
        row.filter.forEach(item=>{
          if (!row.value.includes(item.value)){
            newArr.push(item.value)
          }
        })
        row.value=newArr
      },
      //开始筛选
      handlerFilter(row){
        let clickEvent = new Event('click');
        document.dispatchEvent(clickEvent);
        this.$emit('handlerFilter',row)
      },
      //表单提交
      changeBtn(val,valAll,name){
        this.$emit('changeBtn',val,valAll,name)
      },
    }
  }

</script>
<style lang="scss">
.columnHeader{
  display: inline-flex;
  align-items: center;
  >*{
    &:not(:last-child){
      margin-right: 8px;
    }
  }
}
.filterBox{
  .filterBox-main{
    height:180px;
    padding:8px;
  }
  .filterBox-foot{
    border-top: 1px #e6e6e6 solid;
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding:4px 8px 4px 16px;
    height:38px;
  }
}

</style>
